<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="content">
				<view class="advert-image">
					<image src="../../static/index/logo.png"></image>
				</view>
				<view class="login-cont flexWarpCenterColumn loginBg">
					<view class="input-box">
						<input placeholder="输入手机号" placeholder-class="placeClass" v-model="account" type="number"/>
					</view>
					<view class="input-box">
						<input placeholder="密码" placeholder-class="placeClass" password v-model="password"/>
					</view>
					<view class="login-btn" @tap="login()">登录</view>
					<!-- <view class="join-btn">我要加盟</view> -->
					<view class="tips">本程序仅供小爱台球连锁老板专用，不对外开放！</view>
				</view>
				<view class="tips-box" v-if="tipsShow">
					<view class="tips-title">该手机号无访问权限！</view>
					<view class="btn-box flexWrapNo">
						<view>再试一下</view>
						<view>我要加盟</view>
					</view>
					<view class="tips-img">
						<image src="https://static.mo-yu.vip/wechat/login/tipsImg.png"></image>
					</view>
				</view>
				<view class="mask-wrap" v-if="tipsShow" @tap="closeTips()"></view>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				pageOpc:0,
				tipsShow:false,
				account:"",
				password:"",
				windowHeight: '',
				wxCode:"",
				openid:"",
			}
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				this.$tools.loadIng('加载中...')
				setTimeout(() => {
					uni.reLaunch({
						url:'/pages/index/myStore'
					})
				}, 1000)
			}
			this.wechatLogin();
		},
		created() {
			const {
				windowWidth,
				windowHeight
			} = uni.getSystemInfoSync()
		
			this.windowHeight = windowHeight;
		},
		onReady(){
			setTimeout(() => {
				this.pageOpc=1
			}, 100)
		},
		methods: {
			// 获取微信用户code
			wechatLogin() {
				let that = this
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						console.log(loginRes);
						that.wxCode=loginRes.code
					}
				});
			},
			getOpenid(){
				this.$request.post(this.$api.getOpenid, {
					js_code: this.wxCode
				}, {}).then(res => {
					let {
						data = {}
					} = res;
					this.openid=data.openid
				}).finally(() => {
					setTimeout(()=>{
						this.$tools.hideLoading()
					}, 1000)
				})
			},
			closeTips(){
				this.tipsShow=false
			},
			showTips(){
				this.tipsShow=true
			},
			// 登录
			login(){
				if(!this.account||!this.password){
					this.$tools.showToast('请填写完整后登录!')
					return;
				}
				this.$request.post(this.$api.login, {
					account: this.account,
					password:this.password,
					js_code:this.wxCode
				}, {}).then(res => {
					console.log(res)
					if (res.code==1) {
						let {
							data = {}
						} = res;
						uni.setStorageSync('token', data.userinfo.token)
						uni.reLaunch({
							url:'/pages/index/myStore'
						})
					}else{
						this.wechatLogin();
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	.loginBg {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
	}
	.content{
		padding: 76upx 0;
		z-index: 999;
		background: #EEC162;
	}
	.advert-image{
		width: 100%;
		height: 340upx;
		margin-top: 70upx;
	}
	.login-cont{
		flex: 1;
		background: #FFFFFF;
		padding: 72upx;
		border-radius: 32rpx 32rpx 0rpx 0rpx;
		height: 1000upx;
		.input-box{
			height: 100upx;
			background:#F7F7F7;
			border-radius: 16upx;
			margin-bottom: 20upx;
			width: 100%;
			input{
				padding: 0 48upx;
				height: 100upx;
				line-height: 100upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color:#333;
			}
			.placeClass{
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: 500;
				color:#959595;
			}
		}
		.login-btn{
			width: 322upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			background:#EEC162;
			border-radius: 16upx;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 44upx;
		}
		.join-btn{
			width: 322upx;
			height: 80upx;
			line-height: 80upx;
			text-align: center;
			border: 2upx solid #EEC162;
			border-radius: 16upx;
			font-size: 32upx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 44upx;
		}
		.tips{
			font-size: 24upx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 34upx;
			color: #919AB4;
			position: absolute;
			bottom: 64upx;
		}
	}
	.tips-box{
		height: 770upx;
		background:#1D1C5C;
		border-radius: 16upx;
		position: fixed;
		left: 46upx;
		right: 46upx;
		top: 0;
		bottom: 0;
		margin: auto;
		z-index: 999;
		.tips-title{
			font-size: 36upx;
			font-family: PingFang SC;
			font-weight: 500;
			line-height: 50upx;
			color: #FFFFFF;
			text-align: center;
			margin-top: 90upx;
		}
		.btn-box{
			margin-top: 70upx;
			justify-content: center;
			view{
				width: 240upx;
				height: 80upx;
				line-height: 80upx;
				text-align: center;
				border: 2upx solid #26BCFD;
				border-radius: 16upx;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				&:nth-of-type(1){
					margin-right: 48upx;
				}
			}
		}
		.tips-img{
			width: 556upx;
			height: 420upx;
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
		}
	}
	.mask-wrap{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		background: rgba(4,3,54,0.39);
	}
</style>
